<template>
	<div>
		<div v-show="qbxf">
			<div style="display: flex; flex-direction: column;width: 100%;height: 100%;margin-bottom: 50px;">
				<div style="width: 100%;height: 50%;display: flex;justify-content: flex-end;">
					<div style="padding: 10px; writing-mode: tb-rl;font-size: 15px;letter-spacing:2px;">{{yr}}</div>
					<div
						style="padding: 20px;padding-left: 0;padding-top: 10px; writing-mode: tb-rl;font-size: 25px;font-weight: 500;letter-spacing:5px;">
						{{item.title}}
					</div>
				</div>
				<div style="flex: 1; box-sizing: border-box;padding: 20px;">
					{{item.article}}
				</div>
				<div style="margin:0 20px;padding-bottom: 10px;color: #878787;">{{item.provenance}}</div>
				<div style="margin:0 20px;padding-bottom: 20px;border-bottom: 1px solid #f0f0f0;color: #878787;">
					{{item.author.name}}
				</div>
				<div style="font-weight: 600;box-sizing: border-box;padding: 20px;padding-bottom: 0;">想法</div>
				<div style="box-sizing: border-box;padding: 20px;">
					<div style="display: flex;align-items: center;margin-bottom: 10px;">
						<div
							style="width: 30px;height: 30px;background-color: #e1e1e1;border-radius: 100%;display: flex;align-items: center;justify-content: center;">
							<img style="width: 20px;height: 30px;" src="./img/1.png" alt="">
						</div>
						<input style="color: #cccccc;box-sizing: border-box;padding-left: 10px;font-size: 14px;"
							placeholder="写点什么吧..." v-model="inputValue" @confirm="onConfirm" />
					</div>

					<div style="box-sizing: border-box;padding: 10px 0;" v-for="(item,index) in plsjlt" :key="index">
						<div style="display: flex;align-items: center;">
							<div
								style="width: 30px;height: 30px;background-color: #e1e1e1;border-radius: 100%;display: flex;align-items: center;justify-content: center;">
								<img style="width: 30px;height: 30px;border-radius: 100%;" :src="item.user.avatar"
									alt="">
							</div>
							<div style="color: #cccccc;box-sizing: border-box;padding-left: 15px;font-weight: 600;">
								{{item.user.nickname}}
							</div>
						</div>
						<div
							style="box-sizing: border-box;padding-top: 10px;display: -webkit-box;-webkit-line-clamp: 4;-webkit-box-orient: vertical;overflow: hidden;">
							{{item.content}}
						</div>
					</div>

					<div style="font-size: 14px;color: #c4a068;font-weight: 600;margin-top: 10px;margin-bottom: 50px;"
						@click="qbxf = false">全部{{plsj.length}}条想法</div>
				</div>
			</div>

			<!-- 最底部 -->
			<div
				style="width: 100%;height: 50px;position: fixed;bottom: 0;display: flex;align-items: center;background-color: #ffffff;justify-content: space-between;">
				<div style="display: flex;align-items: center;">
					<div style="margin-left:10px;">
						<van-icon name="like-o" :color="axtbys" @click="djax" />
					</div>
					<div style="margin-left:10px;">{{item.favourite_count}}</div>
					<div style="margin-left:10px;">
						<van-icon name="chat-o" />
					</div>
					<div style="margin-left:10px;">{{item.comment_count}}</div>
				</div>
				<div style="display: flex;justify-content: flex-end;margin-right: 20px;">
					<van-icon name="share-o" />
				</div>

			</div>
		</div>

		<div class="zzc" v-show="qbxf==false">
			<van-icon name="cross" size="30px" style="margin-left: 10px;margin-top: 10px;" @click="qbxf = true" />
			<div v-for="(i,k) in plsj" :key="k">
				<div
					style="width: 90%;background-color: white;margin: 15px 5%;border-radius: 5px;box-sizing: border-box;padding: 10px;">
					<div style="display: flex;align-items: center;margin: 10px 0;">
						<div>
							<img style="width: 30px;height: 30px;border-radius: 100%;" :src="i.user.avatar" alt="">
						</div>
						<div style="font-weight: 600;margin-left: 10px;color: #777777;">{{i.user.nickname}}</div>
					</div>
					<div style="margin: 10px 0;">
						{{i.content}}
					</div>
					<div style="display: flex;margin: 5px 0;">
						<div style="flex: 1;display: flex;font-size: 12px;color: #adadad;">3小时前</div>
						<div style="flex: 1;display: flex;justify-content: flex-end;">
							<van-icon name="chat-o" style="margin-right: 10px;" />
							<van-icon name="like-o" style="margin-right: 10px;" />
						</div>
					</div>
				</div>
			</div>
		</div>

	</div>


</template>

<script>
	export default {
		data() {
			return {
				item: null,
				// 月日
				yr: '',
				plsj: [],
				plsjlt: [],
				axtbys: '',
				axxz: false,
				qbxf: true,
				inputValue: ''
			};
		},
		onReachBottom() {
			// 在这里处理上拉加载下一页数据
			console.log('触底了');
			// this.qbxf = false
		},
		onPageScroll(e) {

		},
		methods: {
			onConfirm() {
				console.log(this.inputValue);
				console.log(this.plsjlt);
				let pl = this.inputValue
				this.plsjlt.push({
					user:{
						avatar:this.plsj[this.plsj.length-2].user.avatar,
						nickname:this.plsj[this.plsj.length-2].user.nickname
					},
					content:pl
				})
				this.inputValue = ''
				console.log(this.plsjlt);
				// item.user.avatar
				// item.user.nickname
				// item.content
			},
			djax() {
				if (this.axxz) {
					this.axxz = !this.axxz
					this.axtbys = 'red'
				} else {
					this.axxz = !this.axxz
					this.axtbys = ''

				}
			},
			formatDate(dateString) {
				// 将输入的日期字符串转换为 Date 对象
				let year = parseInt(dateString.toString().slice(0, 4), 10);
				let month = parseInt(dateString.toString().slice(4, 6), 10) - 1;
				let day = parseInt(dateString.toString().slice(6), 10);
				let date = new Date(year, month, day);

				// 定义月份名称数组
				let monthNames = [
					'一月', '二月', '三月', '四月', '五月', '六月',
					'七月', '八月', '九月', '十月', '十一月', '十二月'
				];

				// 获取日期中的年、月、日
				let formattedMonth = monthNames[date.getMonth()];

				// 定义日名称数组
				let dayNames = [
					'',
					"一日", "二日", "三日", "四日", "五日", "六日",
					"七日", "八日", "九日", "十日",
					"十一日", "十二日", "十三日", "十四日", "十五日",
					"十六日", "十七日", "十八日", "十九日", "二十",
					"廿一", "廿二", "廿三", "廿四", "廿五",
					"廿六", "廿七", "廿八", "廿九", "三十"
				];

				let formattedDay = dayNames[date.getDate()];
				let formattedDate = `${formattedMonth}${formattedDay}`;

				return formattedDate;
			}
		},
		mounted() {
			// console.log(this.item);
		},
		onLoad(options) {
			this.item = JSON.parse(options.item)
			console.log(this.item)
			this.yr = this.formatDate(this.item.date_by_day)
			uni.request({
				url: `https://apis.netstart.cn/daodu/lessons/${this.item.id}/activity_stats`,
				method: 'GET',
				success: (res) => {
					this.item.comment_count = res.data.comment_count
					this.item.favourite_count = res.data.favourite_count
				}
			});
			uni.request({
				url: `https://apis.netstart.cn/daodu/lessons/${this.item.id}/comments`,
				method: 'GET',
				success: (res) => {
					this.plsj = res.data;
					this.plsjlt = res.data.slice(0, 2)
					console.log(this.plsj);
				}
			});


		}
	}
</script>

<style lang="less">
	body {
		width: 100%;
		height: 100%;
	}

	.zzc {
		background-color: rgba(0, 0, 0, 0.6);
		position: absolute;
		top: 0;
	}
</style>
